<template>
  <view class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="矿数卫士处置统计"
      back-icon-color="#fff"
      title-color="#fff"
      title-width="400"
    >
      <view slot="right" class="u-flex">
        <u-image @click="goSearch" width="40" height="40" src="/static/image/filter.png" class="u-m-r-20" />
      </view>
    </u-navbar>
    <div class="u-flex-col top-header">
      <div class="time-body">
        <view class="flex date">
          <template v-if="new Date(searchData.endDate).getTime() > new Date(lastMonth).getTime()">
            <u-button
              v-for="(obj, i) in dateTypeListTwo"
              :key="obj"
              :type="searchData.btType === i ? 'primary' : 'default'"
              class="bt"
              @click.native="monthDay(i)"
              >{{ obj }}</u-button
            >
          </template>
          <template v-else>
            <u-button
              v-for="(obj, i) in dateTypeList"
              :key="obj"
              :type="searchData.btType === i ? 'primary' : 'default'"
              class="bt"
              @click.native="monthDay(i)"
              >{{ obj }}</u-button
            >
          </template>
        </view>
      </div>
      <div class="time-body u-flex">
        <uni-datetime-picker
          type="date"
          :border="false"
          placeholder="请选择开始日期"
          :end="end"
          class="u-m-l-30"
          :clear-icon="false"
          return-type="string"
          v-model="searchData.beginDate"
          @change="changeDate('1')"
        />
        <text class="u-m-l-10 u-m-r-10">至</text>
        <uni-datetime-picker
          type="date"
          :border="false"
          placeholder="请选择结束日期"
          :start="start"
          :end="endTime"
          class="u-m-r-30"
          :clear-icon="false"
          return-type="string"
          v-model="searchData.endDate"
          @change="changeDate('2')"
        />
      </div>
    </div>
    <u-tabs-swiper
      ref="uTabs"
      font-size="26"
      :list="titleList"
      :current="current"
      @change="tabsChange"
      :is-scroll="false"
    >
    </u-tabs-swiper>

    <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="u-flex-1">
      <swiper-item class="swiper-item">
        <closedLoop :search="searchData" @searchList="searchList" v-if="swiperCurrent === 0" />
      </swiper-item>
      <swiper-item class="swiper-item">
        <unClosedLoop :search="searchData" @searchList="searchList" v-if="swiperCurrent === 1" />
      </swiper-item>
      <swiper-item class="swiper-item">
        <disposalTimeOut :search="searchData" @searchList="searchList" v-if="swiperCurrent === 2" />
      </swiper-item>
      <swiper-item class="swiper-item">
        <untreatedAfterTimeout :search="searchData" @searchList="searchList" v-if="swiperCurrent === 3" />
      </swiper-item>
    </swiper>

    <u-toast ref="uToast" />
  </view>
</template>
<script>
import closedLoop from "./closedLoop.vue";
import unClosedLoop from "./unClosedLoop.vue";
import disposalTimeOut from "./disposalTimeOut.vue";
import untreatedAfterTimeout from "./untreatedAfterTimeout.vue";
export default {
  components: {
    closedLoop,
    unClosedLoop,
    disposalTimeOut,
    untreatedAfterTimeout,
  },
  data() {
    return {
      dateTypeList: ["最近30天", "上一月", "下一月"],
      dateTypeListTwo: ["最近30天", "上一月"],
      titleList: [
        { id: 1, name: "闭环概览" },
        { id: 2, name: "未闭环统计" },
        { id: 3, name: "处置超时统计" },
        { id: 4, name: "超时未处置统计" },
      ],
      current: 0,
      swiperCurrent: 0,
      searchData: {
        countyNo: "",
        countyStr: "所有区县",
        customerName: "", //企业名称
        customerNo: "", // //企业编码
        btType: "",
        beginDate: "",
        endDate: "",
        isCustomerQuery: "1",
      },
      isSearch: false,
      start: "",
      end: "",
      lastMonth: "",
      emitEvent: "disposalStatisticsIndex",
      endTime: "",
    };
  },
  onLoad(obj) {
    this.endTime = this.$date(new Date().getTime() - 24 * 3600 * 1000).substring(0, 10);
    this.isJt = getApp().globalData.userInfo.customerAuth;

    this.init();
    this.initTime();
    if (this.verification()) {
      this.getData();
    }
    uni.$on(this.emitEvent, async (res) => {
      this.searchData = {
        ...res,
        pageNumber: 1,
      };
      this.init();
      this.initTime();
    });
  },
  onUnload() {
    // 清除监听
    uni.$off(this.emitEvent);
  },
  methods: {
    /**
     * 搜索
     */
    goSearch() {
      const form = {
        ...this.searchData,
      };
      uni.navigateTo({
        url: `./screen?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`,
      });
    },
    searchList(e) {
      // 获取筛选的区县和煤矿名称
      this.searchData = Object.assign(this.searchData, e);
    },
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = false;
    },
    changeDate() {
      this.$set(this.searchData, "btType", "");
      this.$nextTick(() => {
        this.start = this.searchData.beginDate.substring(0, 10);
        this.end = this.searchData.endDate.substring(0, 10);
      });
    },
    /**
     * 初始时间范围
     */
    initTime() {
      const { beginDate, endDate } = this.searchData;
      if (beginDate && endDate) {
        this.$nextTick(() => {
          this.start = this.searchData.beginDate.substring(0, 10);
          this.end = this.searchData.endDate.substring(0, 10);
        });
      } else {
        this.searchData.btType = 0;
        const date = this.$timeScopeThirtyDaysNoToday();
        this.start = date[0].substring(0, 10);
        this.end = date[1].substring(0, 10);
        this.searchData.beginDate = this.start;
        this.searchData.endDate = this.end;
      }
      const date = this.$getMonthInfo(-1, this.$u.date().substring(0, 8) + "10");
      this.lastMonth = date[0].substring(0, 10);
    },
    monthDay(val) {
      if (val == 2 && new Date(this.searchData.endDate).getTime() > new Date(this.lastMonth).getTime()) {
        return;
      }
      const initDate = this.searchData.endDate ? this.searchData.endDate : this.$u.date();
      this.searchData.btType = val;
      if (val === 0) {
        const date = this.$timeScopeThirtyDaysNoToday();
        this.$set(this.searchData, "beginDate", date[0].substring(0, 10));
        this.$set(this.searchData, "endDate", date[1].substring(0, 10));
      } else if (val === 1) {
        const date = this.$getMonthInfo(-1, initDate.substring(0, 8) + "10");
        this.$set(this.searchData, "beginDate", date[0].substring(0, 10));
        this.$set(this.searchData, "endDate", date[1].substring(0, 10));
      } else if (val === 2) {
        const date = this.$getMonthInfo(1, initDate.substring(0, 8) + "10");
        this.$set(this.searchData, "beginDate", date[0].substring(0, 10));
        this.$set(this.searchData, "endDate", date[1].substring(0, 10));
      }
    },
    verification() {
      let isSubmit = false;
      const date = new Date(this.searchData.endDate);
      const dateStart = new Date(this.searchData.beginDate);
      if (date && dateStart && dateStart.getTime() > date.getTime()) {
        uni.showToast({
          title: "结束时间必须大于开始时间",
          icon: "none",
        });
        isSubmit = false;
      } else {
        isSubmit = true;
      }
      return isSubmit;
    },
    getData() {},
    tabsChange(index) {
      this.swiperCurrent = index;
      this.current = this.swiperCurrent;
    },
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // 重置筛选
    resetSearch() {
      this.searchData = {
        ...this.searchData,
        countyNo: "",
        countyStr: "所有区县",
        // customerStr: '所有煤矿',
        customerNo: "", // //企业编码
        customerName: "", //企业名称
        isCustomerQuery: "",
        pageNumber: 1,
      };
    },
  },
  watch: {
    swiperCurrent() {
      this.resetSearch();
    },
  },
};
</script>
<style lang="scss" scoped>
// 背景
page {
  background: #f7f7fa;
}
.main {
  background: #f7f7fa;
}
.date {
  margin: 1rem 0;

  .bt {
    border-radius: 50px;
    flex-basis: 45%;
    margin: 0 20rpx;
    &:after {
      border-radius: 50px;
    }
  }
}
.top-header {
  background: #fff;
  padding-bottom: 10px;
  .date {
    margin: 10px 10px;
    /deep/ .u-btn--primary {
      color: #3d5fff;
      border-radius: 4px;
      border: 1px solid rgb(61, 95, 255);
      background: rgba(61, 95, 255, 0.1);
    }
    /deep/ .u-btn--default {
      color: #595959;
      border-radius: 4px;
      border: none;
      background: rgba(153, 153, 153, 0.1);
    }
    /deep/.u-hairline-border {
      &:after {
        border: none;
      }
    }
    /deep/ .u-size-primary {
      height: 30px;
      line-height: 30px;
    }
    /deep/ .u-size-default {
      height: 30px;
      line-height: 30px;
    }
    .bt {
      border-radius: 4px;
      flex: 1;
      margin: 0 5px;
      &:after {
        border-radius: 4px;
      }
    }
  }
}

.time-body {
  position: relative;
  width: 100%;
  /deep/.uni-date-x {
    background: rgba(153, 153, 153, 0.1) !important;
    color: #999999 !important;
    border-radius: 4px !important;
  }
}
</style>
